<template>
  <div>
    <!-- Access-Control-Allow-Origin*    当打开浏览器f12 在消息头的响应头里面看到这一句，就代表没有跨域问题，可以直接向这个后端接口访问api-->

    <!-- 路由容器   相当于插槽-->

    <router-view></router-view>
    <section>
      <tabbar v-if='$store.state.isTabbarShow'></tabbar>
    </section>

    <!-- <button class="alert-danger">111</button> -->

  </div>

</template>
<script src="http://localhost:8098"></script>
<script>

// 引入组件/模块
// @别名    相当于绝对路径，举个例子，我要引用public一个文件,那么我引入路径之前就会是../这一一直上一级，但是现在可以直接@/public/你要的东西  这样来拿
// import navbar from './components/Navbar.vue'    //这边就相当于之前Vue.component('名称',{})的大括号
// import sidebar from './components/Sidebar.vue'
import Vue from 'vue'
import axios from 'axios'
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import tabbar from '@/components/Tabbar'

// 注册组件
// Vue.component('Navbar',navbar)
Vue.filter('imgFilter', (path) => {
  return path.replace('160w_220h', '360w_480h')
})
Vue.directive('hello', {
  inserted (el, binding) {
    el.style.border = '1px solid black'
    console.log(binding.value)
  }
})
// Es6导出规范

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);    //这样就相当于全局注册完了，从其他页面使用也可以不用引用了
export default {
  // 可以在其他地方写完组件，在这边引用局部

  components: {
    tabbar,

  },
  data () {
    return {
      myname: '1111',
      datalist: [1111, 222, 333],
      text: '',
      isshow: true,
      imgsrc: "https://p0.meituan.net/movie/11250f8801c67a185e885b25601c6fd32665206.png@160w_220h_1e_1c",

    }
  },
  methods: {
    handleClick () {
      console.log(this.text)
      this.datalist.push(this.text)
    },
    show () {
      this.isshow = !this.isshow
    }
  },
  mounted () {
    /*当请求的网址不是服务器同一个下面，那么就涉及到跨域问题，那么怎么解决跨域呢?这边给的方法是用反向代理，
      暂且不说原理，简单的说使用方法，在vue.config.js里面设置proxy,具体操作看视频或者文档，亦或者看我这个怎么设置，照葫芦画瓢，
      '/maoyan' 跟这边相对应，一旦这边网址是以这个开头，那么就会自动在这个网址前面加上那边设置的网址域开头。
      pathRewrite 就是根据下面的规则相修改，'^/maoyan'  就是把这个网址开头的'/maoyan' 修改成空字符串
      ^是正则表达式
    
    */

    //jquery 引用成功
    // $(function () {
    //   alert(123)
    //   })
    //  axios.get('/maoyan/ajax/movieOnInfoList').then(res=>{
    //       console.log(res.data)
    //   })
  },
}
</script>
<style >
/* scoped 就是局部作用域，确保各个的样式不会相互影响 */
body {
  font-size: 1rem;
}
li {
  list-style: none;
}
html body {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
section {
  padding-bottom: 3.125rem;
}
</style>